<template>
	<view class="login">
		<view class="uni-form-item uni-column">
			<input class="uni-input" 
				   :value="accessToken"
				   @input="change"
				   @confirm="login"
				   placeholder="请输入access_token" />
			<uni-icons v-if="accessToken"
					   type="closeempty" 
					   size="18" 
					   @click="clear"
		    ></uni-icons>
		</view>
		<view class="uni-padding-wrap uni-common-mt">
			<button type="primary" :disabled="isDisabled" @click="login">确 认</button>
		</view>
		<!-- 扫码登录 -->
		<code-scan
			v-show="scanAccessToken"
			:accessToken="scanAccessToken" 
			:prevPage="prevPage" 
			:getUserMsg="getUserMsg"
		 />
	</view>
</template>

<script>
	import scan from './scan.vue'
	export default {
		components: {
			'code-scan': scan
		},
		data (){
			return {
				prevPage: '',
				isDisabled: false,
				accessToken: '3d672619-51c7-4e64-b0a5-8d995f5cc90f',
				scanAccessToken: '',
				isLogin: false
			}
		},
		onLoad (){
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			})
			// 登录成功，回到上一页
			this.prevPage = uni.getStorageSync('to_path')
		},
		onUnload (){
			// 非登录销毁页面，返回首页
			if(!this.isLogin){
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
			this.isLogin = false
			this.scanAccessToken = ''
		},
		onNavigationBarButtonTap(e) {
			uni.scanCode({
			    scanType: ['barCode'],
			    success: (res) => {
					this.scanAccessToken = res.result
			    }
			})
		},
		methods: {
			clear (){
				this.accessToken = ''
				this.isDisabled = true
			},
			change (e){
				this.accessToken = e.detail.value
				this.isDisabled = !this.accessToken
			},
			// 登录
			async login (){
				this.isDisabled = true
				let result = await this.$request.post('/accesstoken', {
					accesstoken: this.accessToken
				})
				if(result.success){
					this.isLogin = true
					uni.showToast({
						title: '登录成功',
						duration: 2000
					})
					uni.setStorage({
						key: 'access_token', 
						data: this.accessToken
					})
					this.$store.commit('add_access_token', {
						token: this.accessToken
					})
					this.getUserMsg(result['loginname'])
				}else{
					return 'false'
				}
				this.isDisabled = false
			},
			// 获取登录用户基本信息
			async getUserMsg (author){
				let result = await this.$request.get('/user/'+author),
					{ data } = result;
				const user_msg = {
					avatar_url: data['avatar_url'],
					score: data['score'],
					loginname: data['loginname'],
					create_at: data['create_at']
				}
				if(result.success){
					uni.setStorage({
						key: 'user_msg',
						data: user_msg,
						success: () => {
							setTimeout(() => {
								uni.switchTab({
									url: this.prevPage || '/pages/index/index'
								})
							}, 300)
						}
					})
					this.$store.commit('add_user_message', {
						user_mg: user_msg
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.login{
		background-color: #FFFFFF;
		padding: 15px 15px 50%;
		.uni-padding-wrap{
			padding-left: 0;
			padding-right: 0;
		}
		.uni-input{
			height: 32px;
			padding-left: 0;
			padding-right: 30px;
			border-bottom: 1px solid #eee;
			font-size: 16px;
		}
		.uni-column{
			position: relative;
			uni-icons,
			.uni-icons{
				background-color: #fff;
			}
			uni-icons text,
			.uni-icons{
				position: absolute;
				z-index: 99;
				right: 0;
				bottom: 12px;
				width: 30px;
				font-weight: bold;
			}
		}
		button,
		uni-button{
			border-radius: 0;
			&::after{
				border-radius: 0;
			}
		}
	}
</style>
